<template>
  <div class="form sign-in">
    <h2>欢迎回来</h2>
    <el-form
      :model="loginForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="账户" prop="username">
        <el-input v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password"></el-input>
      </el-form-item>
    </el-form>
    <p class="forgot-pass">
      <a href="javascript:">忘记密码？</a>
    </p>
    <el-button type="primary" class="btn" @click="login">登录</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "13800138000",
        password: "123456"
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 6,
            max: 11,
            message: "长度在 6 到 11 个字符",
            trigger: "blur"
          },
          { pattern: /^\d+$/, message: "只能输入数字", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  methods: {
    //   登录
    login() {
      this.$refs.ruleForm.validate(isValid => {
        if (isValid) {
          this.$axios({
            url: "/accounts/login",
            method: "post",
            data: this.loginForm
          }).then(res => {
            this.$store.commit("user/setUserInfo", res.data);
            if (this.$route.query.departCity) {
              this.$router.push({
                path: "/air/flights",
                query: this.$route.query
              });
            } else {
              this.$router.push("/");
            }
            //   this.$refs.ruleForm.resetFields();
          });
        }
      });
    }
  },
  //传递登录表单元素
  mounted() {
    this.$emit("getEle", this.$refs.ruleForm);
  }
};
</script>

<style lang="less" scoped>
.form {
  position: relative;
  width: 640px;
  height: 100%;
  transition: -webkit-transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out;
  transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  padding: 30px 20px 0;
  display: flex;
  flex-direction: column;
  h2 {
    width: 100%;
    font-size: 26px;
    text-align: center;
    margin: 20px 0;
  }
  .btn {
    width: 200px;
    margin: 20px auto;
  }
  .demo-ruleForm {
    width: 400px;
    margin: 0 auto;
  }
  .forgot-pass {
    margin: 15px 0;
    text-align: center;
    font-size: 12px;
    color: #cfcfcf;
  }

  .forgot-pass a {
    color: #cfcfcf;
  }
}
</style>